<template>
  <div class="app-container">
    <!-- 条件框 -->
    <el-row :gutter="10">
        <el-col :span="4">
            <el-input @clear="clearName"  placeholder="请输入设备类型名称" v-model="PageDto.name" clearable> </el-input>
        </el-col>
        <el-col :span="4">
          <el-select @clear="clearIndustryId" v-model="PageDto.industryId" clearable filterable placeholder="请选择设备行业">
              <el-option
                v-for="item in industryList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select @clear="clearDeviceType" v-model="PageDto.deviceType" clearable placeholder="请选择设备类型">
              <el-option
                v-for="item in deviceTypeList"
                :key="item.deviceType"
                :label="item.name"
                :value="item.deviceType">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
            <el-button @click="PageDto.now=1;search()" type="success" icon="el-icon-search">搜索</el-button>
        </el-col>
         <el-col :span="2">
            <el-button @click="clearSearch" type="danger" icon="el-icon-delete">清空</el-button>
        </el-col>
         <el-col :span="2" offset="6">
            <el-button @click="add" type="primary" icon="el-icon-plus">新增</el-button>
        </el-col>
    </el-row>
    <!-- 数据表格 -->
    <el-table :data="List" style="width: 100%" max-height="550" class="table" stripe>
      <el-table-column prop="name" label="设备类型名称" align="center"> </el-table-column>
      <el-table-column prop="industry.name" label="所属行业" align="center"> </el-table-column>
      <el-table-column prop="companyName" label="设备类型" align="center"> 
        <template slot-scope="scope">
          <span :class="scope.row.deviceType | typeClassFormat">
            {{ scope.row.deviceType | deviceTypeFormat}}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建日期" align="center"> </el-table-column>
      <el-table-column prop="updateTime" label="修改日期" align="center"> </el-table-column>
      <el-table-column  label="操作" align="center"> 
        <template slot-scope="scope">
          <a @click.prevent="edit(scope.row)">编辑</a>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="PageDto.now"
      layout="total,prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <!-- 新增对话框 -->
    <el-dialog title="添加设备类型" :visible.sync="dialogFormVisible" @closed="clearData">
      <el-row align="middle" type="flex"  class="dialogRow">
        <el-col :span="5" :push="1">
          设备类型名称:
        </el-col>
        <el-col :span="6">
        <el-input v-model="deviceType.name" autocomplete="off" placeholder="请输入设备类型名称"></el-input>
      </el-col>
      </el-row>
      <el-row align="middle" type="flex" class="dialogRow">
        <el-col :span="5" :push="1">
          设备所属行业:
        </el-col>
        <el-col :span="6" >
        <el-select @clear="clearDeviceType" v-model="deviceType.industryId" clearable placeholder="请选择所属行业">
              <el-option
                v-for="item in industryList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row align="middle" type="flex" justify="start" class="dialogRow">
        <el-col :span="5" :push="2">
          设备类型:
        </el-col>
        <el-col :span="6">
        <el-select @clear="clearDeviceType" v-model="deviceType.deviceType" clearable placeholder="请选择设备类型">
              <el-option
                v-for="item in deviceTypeList"
                :key="item.deviceType"
                :label="item.name"
                :value="item.deviceType">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false;saveAdd()">添 加</el-button>
  </div>
  </el-dialog>

    <!-- 编辑对话框 -->
    <el-dialog title="编辑设备类型" :visible.sync="dialogFormVisible1" @closed="clearData">
      <el-row align="middle" type="flex" justify="start" class="dialogRow">
        <el-col :span="5" :push="1">
          设备类型名称:
        </el-col>
        <el-col :span="6">
        <el-input v-model="deviceType.name" autocomplete="off" placeholder="请输入设备类型名称"></el-input>
      </el-col>
      </el-row>
      <el-row align="middle" type="flex" justify="start" class="dialogRow">
        <el-col :span="5" :push="1">
          设备所属行业:
        </el-col>
        <el-col :span="6" >
        <el-select @clear="clearDeviceType" v-model="deviceType.industryId" clearable placeholder="请选择所属行业">
              <el-option
                v-for="item in industryList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row align="middle" type="flex" justify="start" class="dialogRow">
        <el-col :span="5" :push="2">
          设备类型:
        </el-col>
        <el-col :span="6">
        <el-select @clear="clearDeviceType" v-model="deviceType.deviceType" clearable placeholder="请选择设备类型">
              <el-option
                v-for="item in deviceTypeList"
                :key="item.deviceType"
                :label="item.name"
                :value="item.deviceType">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible1 = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible1 = false;saveEdit()">保 存</el-button>
  </div>
  </el-dialog>

  </div>
</template>
<script>
//导入dept api
import { page,add,edit} from "@/api/deviceType";
import { all} from "@/api/industry"
//导入pcd组件
// import PCD  from '../components/pcd.vue';
export default {
  components: {
    // // PCD:PCD
    // PCD
  },
  data() {
    return {
      List: [],
      PageDto: {
        now: 1,
        size: 10,
        name:"",
        industryId:"",
        deviceType:""
      },
      pages: 0,
      total: 0,
      deviceTypeList:[{deviceType:1,name:'网关'},{deviceType:2,name:'传感器'},
                        {deviceType:3,name:'继电器'},{deviceType:4,name:'摄像头'}],
      industryList:[],
      deviceType:{
        id:"",
        name:"",
        deviceType:"",
        industryId:"",
        industry:{}
      },
      dialogFormVisible:false,
      dialogFormVisible1:false,
    };
  },
  methods: {
    handleCurrentChange(now) {
      this.PageDto.now = now;
      this.search();
    },
    search() {
      page(this.PageDto).then((res) => {        
        this.List = res.list;
        this.pages = res.pages;
        this.total = res.total;
      });
      all().then(res=>{
        this.industryList = res.data
      })
    },
    clearSearch(){
      this.PageDto.name = ""
      this.PageDto.industryId = ""
      this.PageDto.deviceType = ""
      this.search()
    },
    clearName(){
      this.PageDto.name = ""
      this.search()
    },
    clearIndustryId(){
      this.PageDto.industryId = ""
      this.search()
    },
    clearDeviceType(){
      this.PageDto.deviceType = ""
      this.search()
    },
    add(){
      this.dialogFormVisible = true
    },
    saveAdd(){
      add(this.deviceType).then(res=>{
        if(res.ok){
          this.search()
          this.$message.success(res.message)
        }else{
          this.$message.error(res.message)
        }
      })
    },
    edit(row){
      this.deviceType.id = row.id
      this.deviceType.name = row.name
      this.deviceType.industryId = row.industryId
      this.deviceType.industry.name = row.industry.name
      this.deviceType.deviceType = row.deviceType
      this.dialogFormVisible1 = true
    },
    saveEdit(){
      edit(this.deviceType).then(res=>{
        if(res.ok){
          this.search()
          this.$message.success(res.message)
        }else
        this.$message.error(res.message)
        
      })
    },
    clearData(){
      this.deviceType.id = ""
      this.deviceType.name = ""
      this.deviceType.industryId = ""
      this.deviceType.industry.name = ""
      this.deviceType.deviceType = ""
    }
  },
  created() {
    this.search();
  },
  filters:{
    deviceTypeFormat(source){
      let fDeviceType = '网关'
      if(source == 2){
        fDeviceType = '传感器'
      }
      else if(source == 3){
        fDeviceType = '继电器'
      }
      else if(source == 4){
        fDeviceType = '摄像头'
      }
      return fDeviceType
    },
    typeClassFormat(source){
      let fTypeClass = "ant-tag ant-tag-pink"
      if(source == 2){
        fTypeClass = "ant-tag ant-tag-orange"
      }
      else if(source == 3){
        fTypeClass = "ant-tag ant-tag-cyan"
      }
      else if(source == 4){
        fTypeClass = "ant-tag ant-tag-purple"
      }
      return fTypeClass
    }
  }
};
</script>

<style>
.dialogRow{
  margin-top:20px ;
}
a{
  color:blue
}
.ant-tag {
    box-sizing: border-box;
    margin: 0 8px 0 0;
    color: #000000d9;
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    font-feature-settings: "tnum";
    display: inline-block;
    height: auto;
    padding: 0 7px;
    font-size: 12px;
    line-height: 20px;
    white-space: nowrap;
    background: #fafafa;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    opacity: 1;
    transition: all .3s;
}
.ant-tag-orange {
    color: #d46b08;
    background: #fff7e6;
    border-color: #ffd591;
}
.ant-tag-purple {
    color: #531dab;
    background: #f9f0ff;
    border-color: #d3adf7;
}
.ant-tag-pink {
    color: #c41d7f;
    background: #fff0f6;
    border-color: #ffadd2;
}
.ant-tag-cyan {
    color: #08979c;
    background: #e6fffb;
    border-color: #87e8de;
}
</style>